<template>
  <div style="width: 100%;height: 100%">
    <baidu-map
      class="map"
      :map-type="search.mapType"
      :center="center"
      :zoom="14"
      @mousemove="syncPolyline"
      @click="paintPolyline"
      @rightclick="newPolyline"
      @ready="handler"
    >

      <!--<bm-control>
        <div style="margin-left: 20px;margin-top: 20px;">
          <el-button @click="toggle('polyline')">{{ polyline.editing ? '停止绘制' : '开始绘制' }}</el-button>
        </div>
      </bm-control>
      <bm-polyline v-for="path of polyline.paths" :path="path" />-->

      <!--自定义控件-->
      <bm-control :offset="{width: '10px', height: '50px'}">
        <el-row>
          <div style="margin-top: 20px;margin-left: 20px;">
            <el-cascader
              ref="cascader"
              v-model="search.area"
              style="width: 200px;"
              :options="areaList"
              :props="{ expandTrigger: 'hover',checkStrictly: true }"
              @change="changeSearch"
            />
            <el-input
              v-model="search.keyWord"
              placeholder="请输入名称或标签模糊"
              style="width: 100%;margin-right: 10px;width: 200px;"
              @blur="blurInput"
              @focus="focusInput"
            />
            <el-button type="primary" style="margin-bottom: 10px;" @click="elasticsearch()">查询</el-button>
            <div style="margin-left: 10px;display: inline-block">
              <el-select
                v-model="search.mapType"
                filterable
                placeholder="请选择地图模式"
              >
                <el-option
                  v-for="item in maptypes"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </el-row>
        <div v-if="workStationList.length>0 && showSearch" class="msgBox">
          <ul>
            <li v-for=" (item,index) in workStationList" :key="'sta'+index">
              <el-link class="chat-text" :underline="false" @click.native="selectStatus(item)">{{ item.title }}</el-link>
              <!--<div class="chat-text" @click.native="selectStatus(item)">{{ item.stationTitle }}</div>-->
            </li>
          </ul>
        </div>
      </bm-control>

      <!--根据坐标覆盖物-->
      <bm-polygon
        v-if="polygonPathList && polygonPathList.length>0"
        :path="polygonPathList"
        stroke-color="#d88a2b"
        fill-color="#d88a2b"
        :fill-opacity="fillOpacity"
        :stroke-opacity="strokeOpacity"
        :stroke-weight="2"
      />
      <!--定位坐标点-->
      <bm-marker
        v-for="(item,index) in markerList"
        :key="index"
        :icon="{
          url:iconPath ,
          size: {width: sizeBox, height: sizeBox},
          opts:{imageSize:{width: sizeBox, height: sizeBox}}
        }"
        :position="item.location"
        :dragging="true"
        @mouseover="infoWindowOpen(item,index)"
        @click="infoWindowOpen(item,index)"
        @mouseout="infoWindowClose(item,index)"
      >
        <bm-info-window
          :show="item.show"
          @close="infoWindowClose(item,index)"
          @open="infoWindowOpen(item,index)"
        >{{ item.name | retunName }}</bm-info-window>
      </bm-marker>

      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />

    </baidu-map>
  </div>

</template>

<script>
/**
   * 自定义定位点 需要经纬度 所以数据都是测试假的
   */
const icon = require('./icon.png')
export default {
  filters: {
    retunName(data) {
      return data && data.length > 0 ? data.join(',') : ''
    }
  },
  data() {
    return {
      // 一组坐标的覆盖面
      polygonPathList: [],
      markerList: [],
      polyline: {
        editing: false,
        paths: []
      },
      iconPath: icon,
      sizeBox: 50,
      fillOpacity: 0.2,
      strokeOpacity: 0.8,
      search: {
        area: '',
        keyWord: '',
        mapType: 'BMAP_NORMAL_MAP'
      },
      center: { lng: 106.1172310000, lat: 30.8432970000 },
      areaList: [
        {
          value: 'chengdu',
          label: '成都',
          children: [
            {
              value: 'nanchong',
              label: '南充',
              children: [{
                value: 'xichong',
                label: '西充'
              }, {
                value: 'nanbu',
                label: '南部'
              }, {
                value: 'dazhou',
                label: '达州'
              }
              ]
            },
            {
              value: 'mianyang',
              label: '绵阳'
            }
          ]
        },
        {
          value: 'shanxi',
          label: '陕西',
          children: [
            {
              value: 'xian',
              label: '西安'
            }
          ]
        }
      ],
      workStationList: [],
      showSearch: false,
      maptypes: [
        { id: 'BMAP_HYBRID_MAP', title: '卫星路网混合图' },
        { id: 'BMAP_NORMAL_MAP', title: '街道视图' }
      ],
      BMap: null
    }
  },
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      var point = new BMap.Point(106.1172310000, 30.8432970000)
      map.centerAndZoom(point, 14)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
      map.addOverlay(circle)
    },
    // 关闭信息显示
    infoWindowClose(item, index) {
      item.show = false
      this.markerList.splice(index, 1, item)
    },
    // 信息显示
    infoWindowOpen(item, index) {
      item.show = true
      this.markerList.splice(index, 1, item)
      this.showSearch = false
    },
    // 去获取具体的点
    selectStatus(data) {
      // 清楚之前的数据
      this.map.clearOverlays()
      this.markerList = [{
        name: ['测试点'],
        show: false,
        location: {
          lng: 106.1172310000,
          lat: 30.8432970000
        }
      }]
    },
    // 根据区域去查询
    changeSearch() {
      this.showSearch = true
      this.workStationList = [
        {
          id: 1,
          title: '万达广场'
        },
        {
          id: 2,
          title: '红旗连锁'
        }
      ]
    },
    blurInput() {},
    focusInput() {},
    elasticsearch() {},
    toggle(name) {
      console.log(name)
      this[name].editing = !this[name].editing
      console.log(this.polyline.paths)
    },
    syncPolyline(e) {
      // console.log(e)
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        return
      }
      const path = paths[paths.length - 1]
      if (!path.length) {
        return
      }
      if (path.length === 1) {
        path.push(e.point)
      }
      this.$set(path, path.length - 1, e.point)
    },
    newPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      if (!paths.length) {
        paths.push([])
      }
      const path = paths[paths.length - 1]
      path.pop()
      if (path.length) {
        paths.push([])
      }
    },
    paintPolyline(e) {
      if (!this.polyline.editing) {
        return
      }
      const { paths } = this.polyline
      !paths.length && paths.push([])
      paths[paths.length - 1].push(e.point)
    }
  }
}
</script>

<style>
  .map{
    height: 900px;
  }
  .msgBox{
    max-height: 640px;
    /*padding: 15px 0;*/
    color: #333;
    background-color: white;
    border-radius: 3px;
    margin-top: 5px;
    width: 200px;
    margin-left: 225px;
    overflow-x: hidden;
  }
  .msgBox ul{
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    display: block;
    list-style-type: disc;
    /*margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;*/
  }
  .msgBox ul li {
    position: relative;
    font-size: 0;
    /*margin-bottom: 10px;
    padding-left: 60px;*/
    min-height: 34px;
    width: 100%;
  }
  li {
    list-style: none;
  }
  .chat-text {
    position: relative;
    line-height: 34px;
    /*margin-top: 25px;
    padding: 8px 15px;*/
    font-size: 14px;
    padding: 5px 20px;
    cursor: pointer;
    color: #333;
    display:inline-block;
    width: 100%;
    /*margin-left: 10px;*/
    word-break: break-all;
  }

  .chat-error {
    position: relative;
    line-height: 34px;
    font-size: 14px;
    padding: 5px 20px;
    cursor: pointer;
    color: #333;
    text-align: center;
    word-break: break-all;
  }
  .chat-error:hover{
    background-color: #f5f7fa;
  }
  .chat-text:hover{
    background-color: #f5f7fa;
  }
</style>
